<!--
 * @Author: 詹真琦(legendryztachi@gmail.com)
 * @Date: 2022-07-12 11:16:08
 * @LastEditors: 詹真琦(legendryztachi@gmail.com)
 * @LastEditTime: 2022-08-12 17:59:14
 * @FilePath: \code\ctp-static-portal-front\src\components\mainArea\components\column\index.vue
 * @Description: 列
-->
<template>
  <div class="column-wrapper">
    <template v-for="(item, index) in data">
      <Row
        v-if="Array.isArray(item[0])"
        :data="item"
        :sectionThemeData="sectionThemeData"
        :mainWidth="mainWidth"
        :key="index"
      />
      <Panel
        v-else
        :data="item"
        :key="`${item.entityId + sectionThemeData.currentSpaceId}`"
        :sectionThemeData="sectionThemeData"
        :mainWidth="mainWidth"
      />
    </template>
  </div>
</template>
<script>
  import Panel from '../panel';
  export default {
    name: 'Column',
    components: { Panel },
    props: {
      data: {
        type: Array,
      },
      sectionThemeData: { type: Object },
      mainWidth: {
        type: Number,
        default: 0,
      },
    },
    data() {
      return {
        // className: '',
      };
    },
    created() {
      // //栏目里面再分区，设置他们的宽度
      // const span = this.data[0].span;
      // if (span) {
      //   this.className = `col-${span}`;
      // }
    },
  };
</script>
<style lang="scss" scoped>
  .column-wrapper {
    display: table-cell;
    vertical-align: top;
    box-sizing: border-box;
  }
</style>
